﻿@using WB.UI.Shared.Web.Extensions
@model WB.Core.BoundedContexts.Headquarters.Views.Maps.MapBrowseItem
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map View</title>
    @Html.GenerateFavicon(Url.Static("/img/identity/favicon-hq"))
   
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #loadingImg {
            position:relative; 
            display: block; 
            z-index:100; 
            margin: 0 auto; 
            margin-top: -300px;
        }
        #emptyData{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -150px;
            width: 300px;
            color: red;
            font-weight: bold;
            background-color: white;
            text-align: center;
        }
    </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/css/main.css">
        <script src="https://js.arcgis.com/4.22/"></script>
    <script>
            require([
                    "esri/Map",
                    "esri/views/MapView",
                    "esri/Graphic",
                    "esri/geometry/Geometry",
                    "esri/geometry/Polygon",
                    "esri/geometry/Extent",
                    "esri/layers/FeatureLayer",
                    "esri/layers/GeoJSONLayer",
                    "esri/layers/support/Field",
                    "esri/layers/support/LabelClass",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/symbols/SimpleFillSymbol",
                    "esri/symbols/SimpleMarkerSymbol",
                    "esri/geometry/support/webMercatorUtils",
                    "esri/renderers/SimpleRenderer",
                    "dojo/on",
                    "dojo/dom",
                    "dojo/domReady!"
                ],
                function (Map, MapView, Graphic, Geometry, Polygon, Extent, FeatureLayer, GeoJSONLayer, Field, 
                    LabelClass, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol, webMercatorUtils, SimpleRenderer, on, dom) {

                    var isPoint = 'Point' === '@Model.ShapeType'
                    
                    var ymin = @Model.YMinVal
                    var ymax = @Model.YMaxVal
                    var xmin = @Model.XMinVal
                    var xmax = @Model.XMaxVal
                    
                    var isDataEmpty = ymin === 0 && ymax === 0 && xmin === 0 && xmax === 0
                    if (isDataEmpty)
                        dom.byId("emptyData").style.display = 'block'
                    
                    if (isPoint) {
                        ymin -= 0.001
                        ymax += 0.001
                        xmin -= 0.001
                        xmax += 0.001
                    }
                
                    var startExtent = new Extent({
                        "xmin": xmin,"ymin": ymin,"xmax": xmax,"ymax": ymax,
                        "spatialReference":{"wkid":@Model.Wkid}
                    });

                    if (startExtent.spatialReference.isWGS84)
                        startExtent = webMercatorUtils.geographicToWebMercator(startExtent);

                    var map = new Map({
                        basemap: "hybrid",
                        extent: startExtent,
                    });
                    
                    var view = new MapView({
                        spatialReference: {"wkid":102100},
                        container: "viewDiv",
                        map: map
                    });
                    
                    if (!isDataEmpty)
                        view.extent = startExtent;

                    var loading = dom.byId("loadingImg")

                    var hasGeoJson = @(Model.HasGeoJson ? "true" : "false")

                    if (hasGeoJson)
                    {
                        const labelClass = new LabelClass({
                          labelExpressionInfo: { expression: "$feature.label" },
                          symbol: {
                            type: "text",  // autocasts as new TextSymbol()
                            color: "black",
                            haloSize: 1,
                            haloColor: "white"
                          }
                        });
                        
                        var geojsonurl = "@Url.Action("MapPreviewJson", "Maps", new { mapName = Model.FileName })"
                        const geojsonlayer = new GeoJSONLayer({
                            url: geojsonurl,
                            labelingInfo : labelClass,
                            labelsVisible: true,
                            });                                
          
                        function layerviewCreate(evt) {
                            loading.style.display = 'block'
                            evt.layerView.watch('updating', (e) => {
                                if (e === false) {
                                    loading.style.display = 'none'
                                }
                            });
                        }
                        
                        on(geojsonlayer, "layerview-create", layerviewCreate);                        
                        geojsonlayer.load().then(() => {
                          if (geojsonlayer.geometryType === "point") {
                                geojsonlayer.renderer = new SimpleRenderer({
                                                        symbol: new SimpleMarkerSymbol({
                                                          style: "circle",
                                                          color: "red",
                                                          size: "10px",
                                                        }),
                                                      });
                          } else if (geojsonlayer.geometryType === "polyline") {
                                geojsonlayer.renderer = new SimpleRenderer({
                                                        symbol: new SimpleLineSymbol({
                                                          style: "solid",
                                                          color: "red",
                                                          width: "2px",
                                                        }),
                                                      });
                          } else if (geojsonlayer.geometryType === "polygon") {
                                geojsonlayer.renderer = new SimpleRenderer({
                                                        symbol: new SimpleFillSymbol({                                                          
                                                          
                                                          outline: {
                                                            color: "red",
                                                            width: "2px",
                                                          },
                                                        }),
                                                      });
                                                      }
                        });
                        
                        map.add(geojsonlayer);
                    }
                    else {
                        var fillSymbol = new SimpleFillSymbol({ outline: { color: [255, 255, 255], width: 1 } });
                    
                        var polygon = Polygon.fromExtent(startExtent);
                                            
                        var polygonGraphic = new Graphic({
                            geometry: polygon,
                            symbol: fillSymbol
                        });

                        view.graphics.addMany([polygonGraphic]);
                        
                        view.watch('updating', function(evt){
                            if(evt === false){
                                loading.style.display = 'none'
                            }
                        })
                    }
                    
                });
        </script>
    
</head>
<body>
    <div id="viewDiv">
    </div>
    <img id="loadingImg" alt="@Common.Loading" src="/img/loader.gif" />
    <div id="emptyData" style="display: none">@Pages.MapDetails_EmptyMapData</div>
</body>
</html>
